<!DOCTYPE html>
<html lang="en">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<head>

  <!--
  为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签
  width属性控制设备的宽度， device-width值可以正确显示在不同设备上
  initial-scale=1.0 确保1:1显示
  user-scalable=no 可以禁用缩放功能，一般用在移动设备上
  maximum-scale=1.0 最大拉伸比例，配合user-scalable使用
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
  <meta charset="UTF-8">

  <title>BootstrapSample1</title>
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <!-- 引入bootStap样式表 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>

  /*body{*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*font-family: Arial,serif;*/
    /*font-size: 104px;*/
    /*!* 行高 *!*/
    /*line-height: 1.428571429;*/
    /*color: #333333;*/
    /*background-color: #ffffff;*/
  /*}*/

</style>


<body>

  <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
          <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
          <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- bootstrap 容器 -->
  <div class="container" style="margin-top: 50px">

    <h1>Hello. world!</h1>
    <!-- 表格以行为单位，自上而下显示 -->
    <div class="row">
      <!--
      每一行必须保持12列
      col-sm-* 手机
      col-md-* 中型设备 平板电脑
      col-lg-* 大型设备 台式电脑
      -->
      <div class="col-sm-6 col-md-8 col-lg-4" style="background-color: white; box-shadow: inset 3px -3px 3px #444, inset -3px 3px 3px #444;">

        <h1>这是h1 <small>副标题h1</small></h1>
        <h2>这是h2</h2>
        <h3>这是h3</h3>
        <p class="lead">
          class="lead",  段落突出，比h标签字体小15%
        </p>
        <strong>加粗加重</strong><br>
        <em>本行内容是在标签内，并呈现为斜体</em><br>
        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>
        <p class="text-muted">本行内容是减弱的</p>
        <p class="text-primary">本行内容带有一个 primary class</p>
        <p class="text-success">本行内容带有一个 success class</p>
        <p class="text-info">本行内容带有一个 info class</p>
        <p class="text-warning">本行内容带有一个 warning class</p>
        <p class="text-danger">本行内容带有一个 danger class</p>

        <!-- 显示简称 -->
        <abbr title="显示简称">简称</abbr><br>

      </div>

      <!--按钮相关-->
      <div class="col-sm-6 col-md-4 col-lg-8" style="background-color: white; box-shadow: inset 3px -3px 3px #444, inset -3px 3px 3px #444;">
        <!-- 标准的按钮 -->
        <button type="button" class="btn btn-default">默认按钮</button>
        <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
        <button type="button" class="btn btn-primary">原始按钮</button>
        <!-- 表示一个成功的或积极的动作 -->
        <button type="button" class="btn btn-success">成功按钮</button>
        <!-- 信息警告消息的上下文按钮 -->
        <button type="button" class="btn btn-info">信息按钮</button>
        <!-- 表示应谨慎采取的动作 -->
        <button type="button" class="btn btn-warning">警告按钮</button>
        <!-- 表示一个危险的或潜在的负面动作 -->
        <button type="button" class="btn btn-danger">危险按钮</button>
        <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
        <button type="button" class="btn btn-link">链接按钮</button>

        <p>
          <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
          <button type="button" class="btn btn-default btn-lg">大的按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
          <button type="button" class="btn btn-default">默认大小的按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
          <button type="button" class="btn btn-default btn-sm">小的按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
          <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
          <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
          <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
          <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-default btn-lg">默认按钮</button>
          <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
        </p>
        <p>
          <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
          <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
        </p>
        <p>
          <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
          <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
        </p>
        <p>
          <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
          <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
        </p>

        <a class="btn btn-default" href="#" role="button">链接</a>
        <button class="btn btn-default" type="submit">按钮</button>
        <input class="btn btn-default" type="button" value="输入">
        <input class="btn btn-default" type="submit" value="提交">

        <!--使用 .btn-group-lg|sm|xs 来控制按钮组的大小：-->
        <div class="btn-group btn-group-lg">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <div class="btn-group-vertical">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <button type="button" class="btn btn-primary">Sony</button>
        </div>
        <!--可以通过 .btn-group-justified 类来设置自适应大小的按钮组。-->
        <div class="btn-group btn-group-justified">
          <a href="#" class="btn btn-primary">自适应按钮组</a>
          <a href="#" class="btn btn-primary">Samsung</a>
          <a href="#" class="btn btn-primary">Sony</a>
        </div>

        <div class="btn-group">
          <button type="button" class="btn btn-primary">Apple</button>
          <button type="button" class="btn btn-primary">Samsung</button>
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              Sony <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Tablet</a></li>
              <li><a href="#">Smartphone</a></li>
            </ul>
          </div>
        </div>

        <div class="btn-group">
          <button type="button" class="btn btn-primary">Sony</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>
          </ul>
        </div>

        <!-- 按钮图标 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html-->
        <button type="button" class="btn btn-primary btn-lg">
          <span class="glyphicon glyphicon-user"></span> User
        </button>
        <button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
          <span class="glyphicon glyphicon-user"></span> User
        </button>

      </div>

      <!--图片-->
      <div class="col-sm-6 col-md-8 col-lg-4" style="background-color: white; box-shadow: inset 3px -3px 3px #444, inset -3px 3px 3px #444;">

        <img src="tile.png" class="img-rounded" style="width: 100px">
        <img src="tile.png" class="img-circle" style="width: 100px">
        <!-- 怎加外边框 -->
        <img src="tile.png" class="img-thumbnail" style="width: 100px">
        <!--img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上-->
        <img src="tile.png" class="img-responsive" alt="Cinque Terre" style="width: 100px">

      </div>

      <!--排版-->
      <div class="col-sm-6 col-md-4 col-lg-8" style="background-color: white; box-shadow: inset 3px -3px 3px #444, inset -3px 3px 3px #444;">
        <p class="pull-left">元素浮动在左边</p>
        <P class="pull-right">元素浮动在右边</P>
        <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
        <p class="show">show显示， hidden隐藏</p>
        <p>关闭图标实例
          <button type="button" class="close" aria-hidden="true">
            &times;
          </button>
        </p>
      </div>

      <!-- 下拉菜单 -->
      <div class="col-sm-6 col-md-8 col-lg-4" style="background-color: white; box-shadow: inset 3px -3px 3px #444, inset -3px 3px 3px #444;">

        <div class="dropdown">
          <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
          </ul>
        </div>

        <div class="dropdown">
          <button type="button" class="btn dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">主题
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
            </li>
          </ul>
        </div>

      </div>

      <!-- 导航 -->
      <div class="col-sm-8 col-md-8 col-lg-8" style="background-color: white; box-shadow: inset 3px -3px 3px #444, inset -3px 3px 3px #444;">
        <p>两端对齐的导航元素</p>
        <ul class="nav nav-tabs nav-justified">
          <li><a href="#">Home</a></li>
          <li class="active"><a href="#">SVN</a></li>
          <li><a href="#">iOS</a></li>
          <li><a href="#">VB.Net</a></li>
          <li><a href="#">Java</a></li>
          <li><a href="#">PHP</a></li>
        </ul><br><br><br>
        <ul class="nav nav-pills nav-justified">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
      </ul>
      </div>
    </div>

  </div>

</body>
</html>
